<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹏影视播放器</title>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="video" style="max-width: 800px; height: 600px; margin: 20px auto"></div>
    <script src="./vplayer.umd.js"></script>
    <script>
        function parseUrlParam(url) {
            if (!/.+\?(.+)$/.exec(url).length) return null
            const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
            const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
            let paramsObj = {};
            // 将 params 存到对象中
            paramsArr.forEach(param => {
                if (/=/.test(param)) {
                    // 处理有 value 的参数
                    let [key, val] = param.split('='); // 分割 key 和 value
                    val = decodeURIComponent(val); // 解码
                    const newval = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

                    if (paramsObj.key) {
                        // 如果对象有 key，则添加一个值
                        paramsObj[key] = [].concat(paramsObj[key], newval);
                    } else {
                        // 如果对象没有这个 key，创建 key 并设置值
                        paramsObj[key] = newval;
                    }
                } else {
                    // 处理没有 value 的参数
                    paramsObj[param] = true;
                }
            });

            return paramsObj;
        }
        if (location.search) {
            let url = parseUrlParam(location).url
            if (url) {
                new VPlayer({
                    el: document.getElementById('video'),
                    url: atob(url)
                })
            } else {
                alert('该视频不存在')
            }
        } else {
            alert('该视频不存在')
        }
    </script>
</body>

</html>